<template>
    <section>
        <div class="breadcrumb">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item >${master.comment}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-row type="flex" justify="center"  class="filter-bar">
            <el-col :span="24">

                <!--工具条-->
                <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                    <el-form :inline="true" :model="form" @keyup.enter.native="fetchList">
                        <el-form-item>
                            <el-input v-model="form.keyword" placeholder="关键字"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="fetchList" icon="el-icon-search" >查询</el-button>
                        </el-form-item>
                        <el-form-item v-if="hasResource('${master.camelName}:add')">
                            <el-button type="primary" @click="handleAdd" icon="el-icon-edit">新增</el-button>
                        </el-form-item>
                        <el-form-item v-if="hasResource('${master.camelName}:batchDel')">
                            <el-button type="danger" @click="batchDel()">批量删除</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-col>
        </el-row>
        <div class="page-content">
              <el-row :gutter="20">
                <el-col :span="6">
                      <el-card :body-style="{ padding: '10px' }" >
                <!-- <div slot="header">
                    <span> </span>
                </div> -->
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.curPage" 
                :total="total" :page-size="form.pageSize" :page-sizes="[50,100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
                <template v-for="item in records">
                    <div v-bind:key="item.id" @click="selectRow(item)">
                        <el-card :key="item.id" :body-style="{ padding: '10px' }" shadow="hover" class="block-item">
                            <el-row >
                                <el-col :span="12" v-on:click="selectRow(item)">
                                    <div> {{item.name}} </div>
                                    <!-- <div class="block-item__comment">{{item.code}}</div> -->
                                </el-col>
                                <el-col :span="12">
                                    <el-button type="text" v-if="hasResource('${master.camelName}:edit')" size="small" @click="handleEdit(item.id, item)">编辑
                                    </el-button>
                                        <el-button type="text" v-if="hasResource('${master.camelName}:delete')" size="small" @click="handleDel(item.id,item)">删除
                                        </el-button>
                                        <el-button type="text" v-if="hasResource('${master.camelName}:list')" size="small" @click="selectRow(item)">显示项目
                                        </el-button>
                                </el-col>
                            </el-row>
                        </el-card>    
                    </div>                
                </template>
              
                
            </el-card>
                </el-col>
                <el-col :span="18">
                    <${slave.hyphenName} ref="child" ></${slave.hyphenName}>
                </el-col>
            </el-row>
           
        </div>
        <${master.hyphenName}-edit v-if="editVisible" ref="addOrUpdate" @refreshDataList="fetchList"></${master.hyphenName}-edit>
    </section>
</template>
<script>
    import ${master.camelName}Edit from './${master.className}Edit.vue'
    import ${slave.camelName} from './${slave.className}.vue'
    export default {
        components: {
            ${master.camelName}Edit,
            ${slave.camelName}
        },
        data() {
            return {
                multipleSelection: [],
                editVisible: false,
                form: {
                    keyword: '',
                    curPage: 1,
                    pageSize: 50,
                },
                records: [],
                total: 0,
                loading: false,
            }
        },
        methods: {
            fetchList() {
                this.loading = true
                let params = {
                    params: this.form
                }
                this.$http
                        .get('/api/${master.camelName}/list', params)
                        .then(({
                            data
                        }) => {
                    this.loading = false
                this.records = data.records
                this.total = data.total

            })
            .catch(e => {
                    this.loading = false;
                console.log(e)
                this.$message({
                    message: '网络故障' + e,
                    type: 'error'
                })
            })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleAdd() {
                this.editVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init()
            })
            },
            handleEdit(id, ${master.camelName}) {
                this.editVisible = true
                this.$nextTick(() => {
                    this.$refs.addOrUpdate.init(${master.camelName})
            })
            },
            handleDel(index, ${master.camelName}) {
                this.del${master.className}([${master.camelName}.id])
            },
            batchDel() {
                console.log(this.multipleSelection)
                if (this.multipleSelection.length != 0) {
                    let ids = this.multipleSelection.map(item => item.id)
                    this.del${master.className}(ids)
                }
            },
            del${master.className}(ids) {
                if (!ids || ids.length == 0) {
                    return;
                }
                console.log(ids)
                this.$confirm(`确定进行[删除]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('/api/${master.camelName}/delete', ids)
                        .then(({
                            data
                        }) => {
                    if (data && data.success === true) {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                        this.fetchList()
                }
                })
                } else {
                    this.$message.error(data.msg)
                }
            })
            })
            },
            selectRow(parent, b) {
                console.log(parent, b)
                this.$refs.child.setParent(parent.id)
            },
            handleCurrentChange(val) {
                this.curPage = val
                this.fetchList()
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.fetchList()
            }
        },
        mounted() {
            this.fetchList()
        }
    }
</script>